<!-- 自定义设置面板 -->
<template>
    <component :is="`${widgetType}-setting`" :widget="widget" />
    <widget-hierarchy :widget-id="widgetId" />
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import WidgetHierarchy from '@/components/edit/widget-hierarchy'
import SettingWidgetPane from './components.js'
export default defineComponent({
    name: 'WidgetSettingPane',
    components: {
        WidgetHierarchy,
        ...SettingWidgetPane
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)
        const widgetType = computed(() => widget.value?.widgetData?.eles?.type || '')
        const widgetId = computed(() => widget.value?.widgetData?.eles?.id || '')

        return {
            widget,
            widgetType,
            widgetId
        }
    }
})
</script>